<template>
  <div class="headerBox">
    <div class="center1200">
      <div class="logoAndName">
        <img src="/logo.png" alt="logo">
        <div class="logoName">
          <div class="ChineseName">泛可视图表</div>
          <div class="EnglishName">FocusCharts</div>
        </div>
      </div>
      <div class="searchBox">领略数据可视化之美</div>
      <div class="topSpan">
        <div v-for="item in topList" :key="item.name" :class="{ active: activeTop === item.name }"
          @click="topClick(item)">{{ item.name }}</div>
      </div>
      <div class="login">登录/注册</div>
    </div>
  </div>
  <div class="content">
    <router-view></router-view> <!-- 这里显示路由匹配的组件 -->
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const activeTop = ref('')
const topList = ref([
  {
    name: '图表库',
    path: '/'
  },
  {
    name: '分析场景',
    path: '/analyze'
  },
  {
    name: '顶刊灵感',
    path: '/topJournalInspiration'
  },
  {
    name: '配色方案',
    path: '/colorScheme'
  }
])
/** 点击头部标签 */
const topClick = (item) => {
  router.push(item.path)
  activeTop.value = item.name
}
onMounted(() => {
  // 获取当前路由的路径
  const currentPath = router.currentRoute.value.path
  // 遍历topList，找到匹配的项
  const matchedItem = topList.value.find(item => item.path === currentPath)
  // 如果找到了匹配的项，则设置activeTop为该项的name
  if (matchedItem) {
    activeTop.value = matchedItem.name
  }
})
</script>
<style lang="scss" scoped>
// 路径定义字体
@font-face {
  font-family: 'shouxieti';
  src: url('/fonts/郭敬明体_0.ttf');
}

// 头部样式
.headerBox {
  width: 100%;
  min-width: 1200px;
  display: flex;
  justify-content: center;
  height: 80px;
  background-position-x: center;
  color: #fff;
  background-size: 5000px 120px;
  position: fixed;
  top: 0;
  z-index: 3;
  background-image: url('/images/headerImg.png');

  .center1200 {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .logoAndName {
      display: flex;
      align-items: center;
      height: 80px;

      img {
        height: 70%;
      }

      .logoName {
        margin-left: 7px;
        color: #fff;
        font-weight: 700;
        text-align: center;
        font-size: 17px;

        .ChineseName {
          font-size: 21px;
        }
      }
    }

    .searchBox {
      // 使用字体
      font-family: 'shouxieti';
      flex: 1;
      font-size: 30px;
      margin-left: 30px;
      font-weight: 500;
    }

    .topSpan {
      display: flex;
      align-self: flex-end;
      margin-right: 25px;

      .active {
        background-color: #f7f8ff;
        color: #133d98;
        border-radius: 10px 10px 0 0;
        font-weight: 700;
      }

      >div {
        padding: 10px;
        cursor: pointer;
      }
    }

    .login {
      font-size: 25px;
      font-weight: 700;
    }
  }
}

.content {
  padding-top: 80px;
  height: calc(100vh - 80px);
  overflow-y: auto;
}
</style>
